<template>
  <div class="login-container" id="mianlay">

    <div class="parent">
      <div class="child">
        <div style="position: absolute;margin-top: -30px;">
          <a href="#"><img alt="" src="../../assets/教职工信息管理系统.png" style="height: 50px;"></a>
        </div>
        <!-- <el-row>
          <el-col :span="24"> -->
        <div style="margin-left: 80px;margin-top: 40px;width: 80%;">
          <h1 style="margin-left: 10px;">帐号为总校区帐号，请选择当前管理操作的校区</h1>
          <el-form label-position="top" label-width="100px" :model="ruleForm" :rules="loginRules" ref="form">
            <el-radio-group v-model="selRadio" style="display: grid;">
              <el-radio v-for="(item,index) in xiaoJiArr" :key="index" :label="item.NEW_XQDM" style="margin-top: 20px;">{{item.XQJC}}</el-radio>
            </el-radio-group>
            <el-form-item>
              <el-button
                style="width:360px;height: 50px;background-color: #ff4d4f !important;;color: #fff;font-size: 16px;margin-top: 30px;"
                @keyup.enter="keyDown" @click="onSubmit">进入系统</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!-- </el-col>
        </el-row> -->
      </div>

    </div>

  </div>
</template>

<script>
import { getRoutesConfig } from "@/services/user"
import { setAuthorization } from "@/utils/request";
import { loadRoutes } from "@/utils/routerUtil";
import { mapMutations } from "vuex";
import httplogin from "../../api/login";
import application from "@/api/application";
// import options from '../../router/config'

import CryptoJS from "crypto-js";
export default {
  name: "Login",
  data() {
    return {
      timer: null,
      logging: false,
      autoLogin: true,
      visible: false,
      current: 1,
      vcode: "",
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      other: "",
      ruleForm: {
        phone: "",
        password: "",
        code: "",
        captcha: "",
        newpassword: "",
      },
      selRadio:"",
      loginRules: {
        phone: [
          { required: true, message: "请输入身份证号/手机号", trigger: "blur" },

        ],

        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        // captcha: [
        //   { required: true, message: "请输入验证码", trigger: "blur" },
        // ],
      },

      messageInfo: "获取验证码",
      isShow: false,
      error: "",
      form: this.$form.createForm(this),
      state: null,
      imgNumber: null,
      imgNumber2: null,
      forgetState: "",
      imgIcon: [],
      appInfo: [],
      layout: "horizontal",
      status: 0,
      xiaoJiArr:[]
    };
  },
  computed: {
    systemName() {
      return this.$store.state.setting.systemName;
    },
    formItemLayout() {
      return this.layout === "horizontal"
        ? {
          labelCol: { span: 4 },
          wrapperCol: { span: 14 },
        }
        : {};
    },
    buttonItemLayout() {
      return this.layout === "horizontal"
        ? {
          wrapperCol: { span: 14, offset: 4 },
        }
        : {};
    },
  },
  mounted() {

    this.getUserPermissionInfofun();
  },
  //销毁事件
  destroyed() {
    // window.removeEventListener('keydown', this.keyDown, false);
  },
  methods: {
    //getUserPermissionInfo
    async getUserPermissionInfofun() {
      let res = await httplogin.getUserPermissionInfo();
      if (res.data.code == 200) {
        if (res.data.data.estate == "区级") {
          this.gotoSystem()
        } else {
           this.xiaoJiArr =  res.data.data.UserPermission
           this.selRadio =  this.xiaoJiArr[0].NEW_XQDM
        }
      }

    },
    onSubmit(){
      localStorage.setItem("selXQDM",this.selRadio);
      this.gotoSystem()
    },
    gotoSystem() {
      let routerArr = [];
      let obj = {
        children: [],
        router: "root",
      };
      httplogin.getNewTreeMenus().then((res) => {

        if (res.data.code == 200) {
          obj.children = res.data.data.menuTree;
          routerArr.push(obj);
          loadRoutes(routerArr);

          this.$router.push({ path: '/home' })
        }

      }).catch((err) => {
        // console.log(res)
        // obj.children = routes;
        // routerArr.push(obj);
        // loadRoutes(routerArr);

        this.$router.push({ path: '/login' })
      });
    },

    forgetPsw() {
      this.visible = true;
      this.init2();
    },
    validateBtn() {
      //倒计时
      let that = this;
      let time = 90;

      //默认样式，防止快速点击好几次

      this.messageInfo = time + "秒后重试";

      that.timer = setInterval(() => {
        if (time == 0) {
          clearInterval(that.timer);

          that.messageInfo = "获取验证码";

          that.isShow = false;
        } else {
          that.messageInfo = time + "秒后重试";

          that.isShow = true;

          time--;
        }
      }, 1000);
    },

  
   

  
 
  
    ...mapMutations("account", ["setUser", "setPermissions", "setRoles"]),
    async formatDataRoute() {
      // let routerArr = [];
      // let obj = {
      //   children: [],
      //   router: "root",
      // };
      // const res = await httplogin.getMenuTree();
      // for (let index = 0; index < res.data.length; index++) {
      //   if (this.status == 0 && res.data[index].id == 113) {
      //     res.data.splice(index, 1);
      //     break;
      //   }
      // }


      // obj.children = res.data;
      // routerArr.push(obj);
      // await loadRoutes(routerArr);
      await this.$router.push("/loading").catch(() => { });
    },
    async isBInddingding() {
      // let id = localStorage.getItem("loginuserId");
      // let param =
      //   "%7Bcreate_user_id%3A" + id + "%2Cfk_adhibition_id%3Adingding%7D";
      // let res = await application.getLists(param);
      // if (res.data.errcode == 0 && res.data.rows.length > 0) {
      //   this.status = 1;
      // }
      this.formatDataRoute();
    },
    //刷新验证码
    init2() {
      httplogin
        .getInitKey()
        .then((result) => {
          const { state } = result.data.data;
          if (result.status == 200) {
            this.state = state;
            const data = {
              state,
            };
            httplogin
              .getNumber(data)
              .then((res) => {
                const { image, state } = res.data.data;
                if (res.status == 200) {
                  this.imgNumber2 = image;
                  this.forgetState = state;
                } else {
                  this.imgNumber2 = null;
                }
              })
              .catch((err) => {
                console.error(err);
              });
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    //刷新验证码
    init() {
      httplogin
        .getInitKey()
        .then((result) => {
          const { state } = result.data.data;
          if (result.status == 200) {
            this.state = state;
            const data = {
              state,
            };
            httplogin
              .getNumber(data)
              .then((res) => {
                const { image } = res.data.data;
                if (res.status == 200) {
                  this.imgNumber = image;
                } else {
                  this.imgNumber = null;
                }
              })
              .catch((err) => {
                console.error(err);
              });
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.formcenter {
  position: absolute;
  min-height: 600px;
  padding: 40px 0;
  width: 1000px;
  display: flex;
  margin: 0 auto;
  flex-direction: row;
  background: #fff;
}

.div1 {
  // display: flex;
  // width: 500px;
  padding: 10px;
  margin-top: 40px;
  // flex: 1;
  // flex-direction: column;
  // border-right: 1px solid #eee;
}

.info-image {
  display: flex;
  width: 100%;
  flex: 1;
  justify-content: center;
  align-items: center;
}

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.child {
  position: absolute;
  // top: 15%;
  // left: 22%;
  // margin-top: -50px;
  // margin-left: -50px;
  min-height: 600px;
  padding: 40px 0;
  width: 1000px;
  display: flex;
  margin: 0 auto;
  flex-direction: row;
  background: #fff;
  box-shadow: 0 5px 30px #5f6f7c17
}

.login-container {
  display: flex;
  align-items: stretch;
  height: 100vh;

  .logo {
    flex: 3;
    background: rgba(38, 72, 176) url(../../assets/common/login_back.png) no-repeat center / cover;
    border-top-right-radius: 60px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    padding: 0 100px;

    .icon {
      background: url(../../assets/common/logo.png) no-repeat 70px center / contain;
      width: 300px;
      height: 50px;
      margin-bottom: 50px;
    }

    p {
      color: #fff;
      font-size: 18px;
      margin-top: 20px;
      width: 300px;
      text-align: center;
    }
  }





}
</style>
